<!--
 * @Author: hua
 * @Date: 2020-07-21 14:20:36
 * @description: 
 * @LastEditors: hua
 * @LastEditTime: 2020-07-23 11:21:12
--> 
<template>
  <div class="dashboard-container">
    <!-- 用户详情  -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>{{$t('userDetails')}}</span>
      </div>
      <div class="text item">
        <div>{{$t('username')}}：</div>
        <div>{{userInfo.username}}</div>
      </div>
      <div class="text item">
        <div>{{$t('name')}}：</div>
        <div>{{userInfo.name}}</div>
      </div>
      <div class="text item">
        <div>{{$t('lastModifiedDate')}}：</div>
        <div>{{userInfo.lastModifiedDate}}</div>
      </div>
      <div class="text item">
        <div>{{$t('creationDate')}}：</div>
        <div>{{userInfo.creationDate}}</div>
      </div>
      <div class="text item">
        <div>{{$t('lastLoginTime')}}：</div>
        <div>{{userInfo.lastLoginTime}}</div>
      </div>
    </el-card>
    <!-- 生产批次  -->
    <el-card class="box-card" style="margin-top:20px;">
      <div slot="header" class="clearfix">
        <span>{{$t('ChooseProductionPlan')}}</span>
      </div>
      <div class="text item">
        <div>{{$t('batchName')}}：</div>
        <div>{{productionBatch.batchName}}</div>
      </div>
      <div class="text item">
        <div>{{$t('batchNumber')}}：</div>
        <div>{{productionBatch.batchNumber}}</div>
      </div>
      <div class="text item">
        <div>{{$t('startDate')}}：</div>
        <div>{{productionBatch.startDate}}</div>
      </div>
      <div class="text item">
        <div>{{$t('endDate')}}：</div>
        <div>{{productionBatch.endDate}}</div>
      </div>
    </el-card>
    <!-- 描述 -->
    <el-card class="box-card" style="margin-top:20px;">
      <div slot="header" class="clearfix">
        <span>{{$t('functionDescription')}}</span>
      </div>
      <div class="text item">{{$t('someDescription')}}</div>
    </el-card>
    <!-- <div class="dashboard-text">userInfo:{{userInfo}}</div> -->
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "dashboard",
  data() {
    return {
      productionBatch: {
        creationDate: "",
        lastModifiedDate: null,
        id: 0,
        batchName: "",
        batchNumber: "",
        startDate: "",
        endDate: "",
        enable: 0,
      },
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-container {
  overflow: auto;
  height: 100%;
  padding: 20px;
}
.item {
  line-height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>
